CSS3 Pseudo-classes 



Pseudo-classes allow adding CSS rules to certain HTML items in a group of matched selectors. 

In this tutorial there are presented the pseudo-classes added in CSS3. These CSS3 pseudo-classes are supported by 

modern Browsers (IE 9+). 

- CSS3 pseudo-classes list: 

> :nth-child(n) - matches every element that is the "nth" child (regardless of type) of its parent, "n" can be a 
keyword (odd, even), an integer number higher than 0, or a number expression of the form (an+b). 

> : nth-last-child (n) - matches every element that is the "nth" child (regardless of type) of its parent, 
counting from the last child, "n" can be a keyword (odd, even), an integer number higher than 0, or a 
number expression of the form (an+b). 

> :nth-of-type(n) - matches every element that is the "nth" child (of a particular type) of its parent, 
ignoring any children that aren't of that type, "n" can be a keyword (odd, even), an integer number 
higher than 0, or a number expression of the form (an+b). 

> :nth-last-of-type(n) - matches every element that is the "nth" child (of a particular type) of its parent, 
ignoring any children that aren't of that type; counting from the last child, "n" can be a keyword (odd, 
even), an integer number higher than 0, or a number expression of the form (an+b). 

> :last-child - matches an element that is the last child of its parent. 

> :first-of-type - matches the first child element of the specified type. 
y :last-of-type - matches the last child element of the specified type. 

> :only-child - matches an element if it's the only child element of its parent. 

> :only-of-type - matches an element that's the only child element of its type. 

> :root - matches the document's root element. In HTML documents, this selector matches the html element. 
y : empty - matches elements that have no children. A text node is considered empty if it has a data length of 

zero; so, for example, a text node with a single space isn't empty. 

> :target - matches an element that's the target of a fragment identifier in the page's URL The fragment 
identifier in a URI comprises a # character followed by an identifier name that matches the value of an ID 
attribute of an element within the web page. 

> : enabled - matches enabled elements. An element is enabled when it can be selected, clicked on, or accept 
text input (mostly used on form elements). 

> : disabled - matches disabled elements. An element is disabled when it cannot be selected, clicked on, or 
accept text input (mostly used on form elements). 

> : checked - matches elements like checkboxes, radio buttons or option in <select> that are checked. 

> :not(s) - also known as the negation pseudo-class; matches elements that aren't matched by the specified 
selector (s). 

- Syntax: 

selector :pseudo-class { property: value; } 

Or, used with class: 

selector ,class:pseudo-class { property: value; } 

To understand CSS3 pseudo-classes, how they work and what is their effect, study the following examples. 



nth-child 

• The nth-child() pseudo-class matches every element that is the "nth" child (regardless of type) of its parent, "n" 
can be a keyword (odd, even), an integer number, or a number expression of the form (an+b). 

1. Matches and sets CSS style to odd-numbered <li> items in <ul> with class="cls". 

<style type=" text/ess "> 
ul.cls li : nth-child (odd) { 
background : # abeded ; 



font-weight : 800 ; 

} 

</style> 



<ul class="cls"> 
<li>http : //CoursesWeb . net/</li> 
<li>http: //www.MarPlo.net/</li> 
<li>www . php . net/</li> 
<li>www . google . com/</li> 

</ul> 



Results: 




• http://CoursesWeb.net/ 

• http://www.MarPlo.net/ 

• www.php.net/ 

• www, goo gle . com/ 

2. Matches and sets CSS style to the first two <li> items in <ul> with class 

<style type=" text/ess "> 
ul.cls li: nth-child (-n +2) { 

background : # abeded ; 

font-weight : 800 ; 

} 

</style> 



<ul class="cls"> 
<li>http : //CoursesWeb . net/</li> 
<li>http: //www.MarPlo.net/</li> 
<li>www . php . net/</li> 
<li>www . google . com/</li> 

</ul> 



Results: 




• http://CoursesWeb.net/ 

• http://www.MarPlo.net/ 

• www.php.net/ 

• www.google.com/ 

3. Defines CSS properties for the third <li> item in HTML element with id 

<style type=" text/css"> 
#theid li: nth-child (3) { 

background : # abeded ; 

font-weight: 800; 

} 

</style> 



<ul id="theid"> 
<li>http : //CoursesWeb . net/</li> 
<li>http: //www.MarPlo.net/</li> 
<li>www . php . net/</li> 
<li>www . google . com/</li> 

</ul> 



Results: 



http://CoursesWeb.net/ 
http://www.MarPlo.net/ 
www.php.net/ 

www. google . com/ 



nth-last-child 



• The nth-last-child() pseudo-class matches every element that is the "nth" child (regardless of type) of its parent, 
counting from the last child, "n" can be a keyword (odd, even), an integer number, or a number expression of the 
form (an+b). 

1. Matches and sets CSS style to the last two <li> items in <ul> with class="cls". 

<style type=" text/css"> 

ul.cls li: nth-last-child (-n + 2) { 

background : #bddef 8 ; 

color: #da8899; 

} 

</style> 

<ul class="cls"> 

<li>http : //CoursesWeb . net/</li> 

<li>http: //www.MarPlo.net/</li> 

<li>www . php . net/</li> 

<li>www . google . com/</li> 
</ul> 

- Demo: 

• http://CoursesWeb.net/ 

• http ://www.MarPlo .net/ 

w.php.net/ 
w.google.com/ 

2. Defines CSS properties for the last <li> item in HTML element with id="theid" (equivalent to ":last-child"). 

<style type=" text/ess "> 
#theid li: nth-last-child (1) { 

background : # abeded ; 

font-weight : 800 ; 

} 

</style> 

<ul ie="theid"> 

<li>http : //CoursesWeb . net/</li> 

<li>http: //www.MarPlo.net/</li> 

<li>www . php . net/</li> 

<li>www . google . com/</li> 
</ul> 

- Results: 

• http://CoursesWeb.net/ 

• http://www.MarPlo.net/ 




nth-of-type 

• The nth-of-type() pseudo-class matches every element that is the "nth" child (of a particular type) of its parent, 
ignoring any children that aren't of that type, "n" can be a keyword (odd, even), an integer number higher than 0, or 
a number expression of the form (an+b). 

1. Matches and sets CSS style to odd-numbered <span> elements in <div> with class="cls". 

<style type=" text/ess "> 
div.cls span: nth-of-type (odd) { 
background: #01fb00; 




color: #0001ef; 

} 

</style> 



<div class="cls"> 
<span>CSS pseudo-classes</span> 
<div>Web Development Courses</div> 
<span>CSS course</spanXbr/> 
<span>HTML - CSS3 tutorials</span> 

</div> 



- Demo: 

CSS pseudo-classes 
Web Development Courses 
CSS course 

HTML - CSS3 tutorials 



2. Specify a background and text color for all <p> elements whose index is a multiple of 2, in HTML item with 
id="theid". 

<style type=" text/ess "> 
#theid p:nth-of-type (2n + 0) { 

background: #01fb00; 

color: #0001ef; 

} 

</style> 



<div id="theid"> 

<p>CSS pseudo-classes</p> 

<div>Web Development Courses</div> 

<p>CSS course</p> 

<p>HTML - CSS3 tutorials</p> 
</div> 



- Results: 

CSS pseudo-classes 
Web Development Courses 
CSS course 

HTML - CSS3 tutorials 



nth-last-of-type 

• The nth-last-of-type() pseudo-class matches every element that is the "nth" child (of a particular type) of its 
parent, ignoring any children that aren't of that type; and counting from the last child, "n" can be a keyword (odd, 
even), an integer number higher than 0, or a number expression of the form (an+b). 

1. Specify a background color for last two <p> elements in HTML item with id="theid". 

<style type=" text/ess "> 
#theid p : nth-last-of-type (-n + 2) { 
background: #01fb00; 

} 

</style> 

<div id="theid"> 
<p>CSS pseudo-classes</p> 
<div>Web Development Courses</div> 
<p>CSS course</p> 
<p>HTML - CSS3 tutorials</p> 



</div> 



- Results: 

CSS pseudo-classes 
Web Development Courses 
CSS course 

HTML - CSS3 tutorials 



last-child 

• The last-child pseudo-class matches an element that is the last child of its parent. 

1 . Specify a background color and border for the last <li> element in every <ul> item. 

<style type=" text/ess "> 
ul li : last-child { 

background: #01fb00; 

border: 2px dashed blue; 

} 

</style> 
<ul> 

<li>http : //CoursesWeb . net/</li> 
<li>http: //www.MarPlo.net/</li> 
<li>www . php . net/</li> 
<li>www . google . com/</li> 
</ul> 

- Demo: 

• http://CoursesWeb.net/ 

• http://www.MarPlo.net/ 

• www._php.net/ 

• ■ www. google, com/ 



first-of-type 

• The first-of-type pseudo-class matches the first child element of the specified type. 

1. Specify a background color and border for the first <p> element that's a child of a Div element:. 

<style type=" text/ess "> 
div>p : first-of-type { 

background: #01fbOO; 

border: 2px dashed blue; 

} 

</style> 
<div> 

<p>CSS3 pseudo-classes</p> 
<div>Web Development Courses</div> 
<p>Build and design web pages</p> 
<p>HTML - CSS tutorials</p> 
</div> 

- Demo: 

iCSS3.pseudo-c^ 



Web Development Courses 
Build and design web pages 
HTML - CSS tutorials 



last-of-type 

• The last-of-type pseudo-class matches the last child element of the specified type. 

1 . Specify a background color and border for the last <p> element that's child <div> item. 

<style type=" text/ess "> 
div>p : last-of-type { 

background: #01fb00; 

border: 2px dashed blue; 

} 

</style> 
<div> 

<p>CSS3 pseudo-classes</p> 
<div>Web Development Courses</div> 
<p>Build and design web pages</p> 
<p>HTML - CSS tutorials</p> 
</div> 

- Demo: 

CSS3 pseudo-classes 
Web Development Courses 
Build and design web pages 



only-child 

• The only-child pseudo-class matches an element that's the only child element of its type. 

1 . Defines a background color for <p> element that is the only child of its parent. 

<style type=" text/ess "> 
p: only-child { 

background: #01fb00; 

} 

</style> 

<divXp>This is a Div with only a child item, a paragraph . </pX/div> 
<divXspan>This is a Div with span tag.</spanXp>And a paragraph . </pX/div> 

- Demo: 

This is a Div with only a child item, a paragraph. 

This is a Div with span tag. 

And a paragraph. 



only-of-type 

• The only-of-type pseudo-class matches an element that's the only child element of its type. 



1 . Defines a background color for <p> element that is the only child of its type in its parent. 

<style type=" text/ess "> 
p : only-of-type { 

background: #01fb00; 

} 

</style> 

<divXp>This is a Div with two child items, two paragraphs . </pXp>Second P 
child . </pX/div> 

<divXp>This is another Div with two child items, a paragraph . </pXspan>And a span 
tag . </spanX/div> 

- Demo: 

This is a Div with two child items, two paragraphs. 
Second P child. 



This is another Div with two child items, a paragraph. 




And a span tag. 



root 

• The root pseudo-class matches the document's root element. In HTML documents, this selector matches the html 
element. 

1 . Sets a background color for Root (<html> item, so, for entire page). 

<style type=" text/css"> 
: root { 

background: #01fb00; 

} 

</style> 



empty 

• The empty pseudo-class matches elements that have no children. A text node is considered empty if it has a data 
length of zero; so, for example, a text node with a single space isn't empty. 

1 . Sets a width, height, and background for empty <li> elements in every <ul> item. 

<style type=" text/ess "> 
ul li : empty { 

width: 2 em; 

height: lem; 

background: #01fb00; 

} 

</style> 
<ul> 

<li>http : //CoursesWeb . net/</li> 
<liX/li> 

<li>www . php . net/</li> 
<liX/li> 
</ul> 



- Demo: 



http://CoursesWeb.net/ 



www.php.net/ 



target 

• The target pseudo-class matches an element that's the target of a fragment identifier in the page's URL The 
fragment identifier in a URI comprises a # character followed by an identifier name ( http://coursesweb.net/css/css3- 
pseudo-classes#nthlc ) that matches the value of an ID attribute of an element within the web page (</z 
id="nthlc"></li>). 

1 . Specify a background color and font- weight for the element that has the ID the same with the targei in URL 
address (after # character). For example, if the page address in the browser is: "page.html#target_id", the LI tag 
with id="target_id" will be displayed with a background color and font thicker. 

<style type=" text/ess "> 
: target { 

background: #01fbOO; 

font-weight : 800 ; 

} 

</style> 
<ul> 

<li id="other_id">http: //www.MarPlo.net/</li> 
<li id="target_id">http: //CoursesWeb . net/</li> 
<li id="another_id">www.php . net/</li> 
</ul> 



enabled 

• The enabled pseudo-class matches enabled elements. An element is enabled when it can be selected, clicked on, or 
accept text input (mostly used on form elements). 



1. In this example, sets some CSS styles to all the enabled input items in element with id="formid" (these styles are 
not applied to input with "disabled" attribute). 

<style type=" text/css"> 
#formid input : enabled { 

background: #01fb00; 

font-weight: 800; 

} 

</style> 

<form action="#" method="post" id="formid"> 
<input type="password" value="abcxyz" /> 

<input type="text" disabled="disabled" value="disabled" /> 
<input type="button" value=" Button" /> 
</form> 



- Demo: 



enabled 


disabled 







disabled 



• The disabled pseudo-class matches disabled elements. An element is disabled when it cannot be selected, clicked 
on, or accept text input (mostly used on form elements). 

1. In this example, defines some CSS styles to all the disabled input items in element with id="formid" (input with 
"disabled" attribute). 

<style type=" text/ess "> 
#formid input : disabled { 

background: #01fb00; 

font-weight : 800 ; 

} 

</style> 

<form action="#" method="post" id="formid"> 
<input type="text" value="enabled"/> 

<input type="text" disabled="disabled" value="disabled" /> 
<input type="button" value=" Button" /> 
</form> 



Demo: 



enabled 



disabled 



checked 

• The checked pseudo-class matches elements like checkboxes, radio buttons or option in <select> that are checked. 

1 . In the following example we have a hidden checkbox button, and a label item associated to it (with "for" 
attribute). We set in ess to apply "display: block" to checked input with class-'cls". So, when you click on the label 
item, the checkbox is checked, and is made visible. When the checkbox is uncheck, it is again hidden. 

<!doctype html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content=" text/html ; charset=UTF-8" /> 
<title>Example checked pseudo-class</title> 
<style type=" text/css"> 
input. els { 

display: none; 

} 

input . els : checked { 
display: block; 

} 

#lchb { 

cursor: pointer; 

} 

</style> 

</head> 

<body> 

<input type=" checkbox" id="chb" class="cls"/> 

<label id="lchb" f or="chb">Show hidden checkbox</label> 

</body> 
</html> 



not(s) 

• The not(s) pseudo-class, also known as the negation pseudo-class; matches elements that aren't matched by the 
specified selector (s). 

1. Specify a background color and font-style to all the UL items without class-'clas". 

<style type=" text/ess "> 
ul : not ( . clas) { 

background : #abedcd ; 

font-style: italic; 

} 

</style> 
<ul> 

<li>http : //CoursesWeb . net/</li> 

<li>This UL has no class</li> 
</ulXbr/> 
<ul class="clas"> 

<li>www . php . net/</li> 

<li>This UL has class="clas"</li> 
</ul> 

- Demo: 

• http: //Courses Web, net/ 

• This UL has no class 




•www.php.net/ 

•This UL has class-'clas" 



